Web Page Design for Designers

 


 

 

Most recent browsers can display background images. These can be small rectangular images that the browser 'tiles' to fill the window. Each single 'tile' can be as small as you like but although a 2 x 2 pixel tile will download very quickly, it requires more processing time to fill the screen, so screen updates will be painfully obvious.

Don't make background tiles too small - experiment with different sizes and number of repeats to find the best compromise between downloading time and screen redraw.

Remember that type will usually have to go over your background image. If the background has too strong a pattern, it will make the type hard to read. You can put dark type on a light background and light type on a dark background without too much trouble. When you have a mid tone background, you may be able to use colour contrast to make the type stand out i.e. yellow on blue, but you stand more chance of compromising visibility.

tiletiletiletiletiletiletiletiletile

Multiple 'instances' of a single GIF file

Browser background images are created from small GIF tiles and will download and display fairly quickly but any GIF or JPEG image, once downloaded, can be reused in multiple 'instances' on a web page with little or no extra overhead. Fancy rules, logos, bullets and even animated icons can bring a dull page to life and won't keep the reader waiting.

By keeping the top portion of web page

relatively free of large graphics,

the user can start reading the page whilst

the more serious downloading is

happening out of sight 'down below'

 


 

 

 

Progressive rendering and interlacing

help to mask the time delay in

downloading larger JPEG and GIF files

Another trick to give the impression of faster downloading of larger pictures is to use 'progressive rendering'. Here the image appears in it entirety almost immediately, but in a low, chunky resolution. As more of the image is downloaded, the resolution gets better until eventually it has rendered completely. This is preferable to watching the slow progress of a linear 'wipe' from top to bottom as the main elements of the image will be recognised at the beginning, except for small embedded type, which will not be readable until near the end of the image download. Nevertheless, the constant improving of the image resolution gives the reader something 'slightly' interesting to look at and masks the passage of time - you know how time passes more slowly when you are bored!

Progressive rendering has to be introduced to the original file being saved and depends on having the right program to do it. Adobe PhotoShop has an Export plug-in called GIF89a which gives the option of 'Interlacing' the saved file and PageMill has an option in its graphics editor to save the file in a similar fashion. There are various shareware utilities for manipulating web image files that include 'progressive rendering' as output options - see the Links page for details.

The other possibilities offered by the GIF89a format are transparency and animation.

 

Transparency is where you can choose one colour from your GIF image to be 'no colour' - like painting it on a clear acetate overlay.

So you could change the image's white background to 'clear' to get the effect of a cut-out halftone on your web page. This technique is particularly useful for 'floating' type and irregularly shaped pictures.

 

animation

This is a sequence of nine images
combined into one GIF89a file with a
.15 second delay between each frame

 

 

The GIF89a format also supports 'animation'. This is just a multiplicity of same-sized images with a pre-set delay between showing each - all stuffed into one GIF file like a flip book. Again, you need a suitable application to create these animations and there are shareware programs available on the Net for Mac and PC.

Be aware that animated GIF files, if running too fast, can cause problems on web pages making it difficult to click on another button or link.


menunext